/* 地址容器布局 - 居中容器设置
Address Container Layout - Centered Container Settings */
.address-container {
  padding: 20px;       /* 容器内边距20px Container padding */
  max-width: 800px;   /* 最大宽度限制 Max width constraint */
  margin: 0 auto;     /* 水平居中 Horizontal centering */
}

/* 头部区域 - Flex布局控制按钮与计数器
Header Area - Flex layout for button and counter */
.address-header {
  display: flex;         /* 弹性布局 Flex layout */
  align-items: center;  /* 垂直居中 Vertical centering */
  margin-bottom: 20px;  /* 底部外边距 Bottom margin */
}

/* 新增按钮样式 - 主操作按钮设计
Add Button Style - Primary Action Button Design */
.add-btn {
  padding: 10px 20px;     /* 按钮内边距 Button padding */
  background-color: #007bff; /* 品牌蓝色 Brand blue */
  color: white;           /* 文字颜色 Text color */
  border: none;           /* 去除边框 Remove border */
  border-radius: 5px;     /* 圆角半径5px Rounded corners */
  cursor: pointer;        /* 指针样式 Cursor style */
}

.address-count {
  margin-left: 15px;
  color: #666;
  font-size: 0.9em;
}
.ddress-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; 
  width: 500px;
}

/* 模态框设置 - 全屏半透明遮罩
Modal Settings - Fullscreen Overlay */
.modal {
  display: none;             /* 默认隐藏 Default hidden */
  position: fixed;          /* 固定定位 Fixed positioning */
  top: 0;
  left: 0;
  width: 100%;              /* 全宽 Full width */
  height: 100%;             /* 全高 Full height */
  background-color: rgba(0,0,0,0.5); /* 半透明黑色背景 Semi-transparent background */
}

/* 模态框内容区 - 居中弹性容器
Modal Content Area - Centered Flex Container */

.modal-content {
  background-color: #fff; /* 白色背景 White background */
  margin: 60px auto;      /* 垂直间距60px，水平居中 60px vertical margin, horizontal centering */
  padding: 20px;          /* 内边距控制 Content padding */
  width: 60%;             /* 相对宽度60% Relative width */
  border-radius: 5px;     /* 圆角效果 Rounded corners */
  display: flex;          /* 弹性布局容器 Flex container */
  flex-direction: column; /* 垂直排列子元素 Vertical item arrangement */
}

/* 模态头部 - Flex右对齐子元素并垂直居中
Modal Header - Flex end-alignment with vertical centering */
.modal-header {
  display: flex;           /* 弹性布局/Flex container */
  justify-content: space-between; /*元素沿着主轴（水平方向）均匀分布*/
  align-items: center;    /* 垂直居中/Vertical centering */
  margin-bottom: -15px;    /* 底部间距15px/15px bottom margin */
  margin-top: -25px;    /* 顶部部间距25px/15px bottom margin */;
  width: 100%;            /* 充满容器宽度/Full container width */
  padding: 1px;         /* 内边距10px/10px padding */;
}

/* 关闭按钮定位 - 通过order属性控制排列顺序
Close Button Positioning - Order property controls layout sequence */
.close {
  order: 2;
  margin-bottom: 2px;
  border: 0.5px solid #007bff;
  padding: 1.5px 2.5px;      /* 调整内边距保持正方形比例 */
  border-radius: 1px;    /* 正方形边框 */
  font-size: 0.5em;       /* 减小字体大小 */
}
/* 表单标题布局 - 主内容优先排列
Form Title Layout - Primary content priority */
.form-title {
  order: 3;            /* 设置优先显示顺序 Set display order to first */
  margin-left: 0;    /* 微调文字对齐位置 Fine-tune text alignment */
}
/* 使分割线的宽带充满整个容器 */
hr {
  border: none;
  border-top: 1px solid #000;
  margin: 0;
  width: calc(100% + 40px);
  box-sizing: content-box;
  margin: 0 -20px;
}

/* 地址项卡片 - 带阴影的悬浮效果
Address Item Card - Shadow hover effect */
.address-item {
  background: #f8f9fa;       /* 浅灰色背景 Light gray background */
  padding: 15px;            /* 卡片内边距 Card padding */
  margin-bottom: 10px;      /* 项间距 Item spacing */
  border-radius: 5px;       /* 圆角匹配整体风格 Consistent rounded corners */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 细微投影增强层次感 Subtle shadow for depth */
  
}

/* 表单组间距 - 保持垂直节奏
Form Group Spacing - Maintain vertical rhythm */
.form-group {
  margin-bottom: 15px;  /* 表单项间隔15px 15px spacing between form items */
}


/* 标签样式 - 块级元素保证对齐
Label Style - Block element for alignment */
.form-group label {
  display: block;        /* 块级显示确保垂直排列 Block display for vertical layout */
  margin-bottom: 5px;   /* 标签与输入框间距5px 5px spacing between label and input */
}

/* 表单控件基础样式 - 统一输入元素
Form Control Base Style - Unified Input Elements */
.form-control {
  width: 100%;          /* 充满容器宽度 Full width */
  padding: 8px;        /* 输入框内边距 Input padding */
  border: 1px solid #ddd; /* 边框颜色 Border color */
  border-radius: 4px;  /* 圆角半径4px Rounded corners */
}